在某些時候，我們會希望內容在特定的情況下才顯示，例如頁籤的效果，雖然可以透過 v-if 來判斷，並顯示元件
但元件一多的時候，反而不是一個理想的方法，所以才有 is 動態切換元件

先來初談 v-if 判斷元件的顯示:

<div id="app">
    <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link" :class="{'active': current == 'primary-component'}" href="#" @click.prevent="current = 'primary-component'">藍綠色元件</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" :class="{'active': current == 'danger-component'}" href="#" @click.prevent="current = 'danger-component'">紅色元件</a>
        </li>
     </ul>
     <primary-component v-if="current === 'primary-component'"></primary-component>
     <danger-component v-if="current === 'danger-component'"></danger-component>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            current: 'primary-component'
        }
    });
</script>

上述是透過點擊 標籤來更動 data 內的 current 變數，再藉由 v-if 去判斷 current 變數符合條件時，元件就會顯示，當元件一多的時候，還要逐一判斷，顯得有點笨拙，這時候可以使用 is 動態切換元件

<div id="app">
    <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link" :class="{'active': current == 'primary-component'}" href="#" @click.prevent="current = 'primary-component'">藍綠色元件</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" :class="{'active': current == 'danger-component'}" href="#" @click.prevent="current = 'danger-component'">紅色元件</a>
        </li>
     </ul>
     <div :is="current"></div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            current: 'primary-component'
        }
    });
</script>

使用 is 動態切換元件，current 變數我們需要放元件的名字，這樣我們就可以做到動態切換元件